<template>
    <div id="allpage">
        <div class="one">
            <p class="xuehao">学号：{{xuehao}}</p>
        </div>
        <div class="two">
            <img :src="dizhi" alt="" class="touxiang">
            <p class="nicheng">{{nicheng}}</p>
            <p class="qianming">" {{qianming}} "</p>
            <p class="shuju"><span class="fensi">{{fensi}}粉丝</span><span class="guanzhu">{{guanzhu}}关注</span><span class="huozan">{{huozan}}获赞</span></p>
        </div>
        <div class="addguanzhu" >关注+</div>
        <div class="line"></div>
        <div class="three">
            <p v-bind:class={dongtai:istrue1} @click="fn1">主页</p>
            <p v-bind:class={shoucang:istrue2} @click="fn2">动态</p>
            <p v-bind:class={kecheng:istrue3} @click="fn3">课程</p>
        </div>
        <div class="four">
            <div v-bind:class={dongtaicontent:true,ishide:istrue4}>
                <div class="tadejieshao">
                    <p class="jieshao1">TA的介绍</p>
                    <span>{{gerenjieshao}}</span>
                </div>
                <div class="tadeline"></div>
                <div class="tadezuopin">
                    <p class="zuopin1">TA的作品</p>
                   <div class="imgbox">
                    <img v-for="i in 8" :src=arr[i] alt="">
                   </div>
                </div>
            </div>
            <div v-bind:class={kecheng:true,ishide:istrue5}>
                <div v-bind:class={ishide:istrue6}>
                    <img src="https://assets-cdn.lanqb.com/pc_users/default-img04.png?imageView2/1/w/300/h/220" alt="">
                    <p class="empty">空空的~</p>
                    <p class="nothing">暂时什么也没有</p>
                </div>
            </div>
            <div v-bind:class={kecheng:true,ishide:istrue7}>
                <div v-bind:class={ishide:istrue8}>
                    <img src="https://assets-cdn.lanqb.com/pc_users/default-img04.png?imageView2/1/w/300/h/220" alt="">
                    <p class="empty">空空的~</p>
                    <p class="nothing">暂时什么也没有</p>
                </div>
            </div>
        </div>
        <router-view></router-view>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    data(){
        return {
            xuehao:"",
            dizhi:"",
            nicheng:"",
            qianming:"",
            fensi:"",
            guanzhu:"",
            huozan:"",
            gerenjieshao:"",
            true:true,
            istrue1:true,
            istrue2:false,
            istrue3:false,
            istrue4:false,
            istrue5:true,
            istrue6:true,
            istrue7:true,
            istrue8:true,
            arr:[""]
        }
    },
    methods: {
        fn1:function(e){
            this.istrue1=true,
            this.istrue2=false,
            this.istrue3=false,
            this.istrue4=false,
            this.istrue5=true,
            this.istrue6=true,
            this.istrue7=true,
            this.istrue8=true
        },
        fn2:function (e) {
            this.istrue1=false,
            this.istrue2=true,
            this.istrue3=false,
            this.istrue4=true,
            this.istrue5=false,
            this.istrue6=false,
            this.istrue7=true,
            this.istrue8=true
        },
        fn3:function (e) {
            this.istrue1=false,
            this.istrue2=false,
            this.istrue3=true,
            this.istrue4=true,
            this.istrue5=true,
            this.istrue6=true,
            this.istrue7=false,
            this.istrue8=false
        },
    },
    
    async mounted(){
        let xuehao = window.location.search.split("?")[1].split("=")[1]
        console.log(xuehao);
        let data = await axios.get("/login1/jianjie",{params:{xuehao}})
        console.log(data);
        this.dizhi = data.data[0].dakaimg
        this.nicheng = data.data[0].name
        this.qianming = data.data[0].qianming
        this.fensi = data.data[0].fensi
        this.guanzhu = data.data[0].guanzhu
        this.huozan = data.data[0].huozan
        this.gerenjieshao=data.data[0].jieshao
        this.xuehao = xuehao
        let dakazuopin = await axios("/login1/zuopin",{params:{xuehao}})
        console.log(dakazuopin);
        for(let i=0;i<dakazuopin.data.length;i++){
            this.arr.push(dakazuopin.data[i].dakazuopinimg)
        }
        console.log(this.arr);
    }
}
</script>
<style lang="scss" scoped>
    *{
        margin: 0;
        padding: 0;
    }
    a{
        text-decoration: none;
    }
    .one{
        width: 100%;
        height: 200px;
        background-image: url(https://assets-cdn.lanqb.com/daniu/home-bg_gurus.png?v=20210304);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        box-sizing: border-box;
        justify-content: space-around;
    }
    .one .xuehao{
        width: 10%;
        font-size: 18px;    
        height: 24px;
        margin-left: 20%;
        color: white;
        padding: 10px;
        background-color: skyblue;
        position: relative;
        top: 20px;
        border-radius: 10000px;
    }
    .one .enter{
        font-size: 18px;
        height: 24px;
         margin-top: 20px;
         color: white;
         padding: 10px;
         background-color: #73B2FC;
         border-radius: 10000px;
    }
    .one .enter:hover{
        background-color: #027CDB;
    }
    .two .touxiang{
        width: 120px;
        height: 120px;
        border-radius: 60px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-top: -60px;
        border-top: 4px solid #92AFCB;
        border-left: 4px solid #92AFCB;
        border-right: 4px solid #92AFCB;
    }
    .two .bianji{
        display: inline-block;
        position: relative;
        top: -50px;
        left: 75%;
        z-index: 99;
        padding: 10px 15px;
        border: 1px solid gainsboro;
        border-radius: 100px;
    }
    .two .bianji span{
        font-size: 20px;
        color: gainsboro;
     }
    .two .bianji:hover{
        border: 1px solid black;
    }
    .two .nicheng{
        width: 100px;
        text-align: center;
        font-size: 25px;
        margin: 0 auto;
        margin-top: 20px;
    }
    .two .qianming{
        font-size: 20px;
        width: 40%;
        text-align: center;
        margin: 0 auto;
        margin-top: 20px;
    }
    .two .shuju{
        width: 40%;
        display: flex;
        margin: 25px auto;
        justify-content: space-around;
        font-size: 20px;
    }
    .addguanzhu{
        width: 10%;
        background-color: skyblue;
        font-size: 20px;
        text-align: center;
        padding: 10px 0;
        margin: 0 auto;
        margin-top: 40px;
        margin-bottom: 40px;

    }
    .line{
        width: 100%;
        height: .1px;
        background-color: gainsboro;
    }
    .three{
        width: 20%;
        height: 40px;
        display: flex;
        justify-content: space-around;
        margin: 15px auto;
        margin-bottom: 0;
        box-sizing: border-box;
    }
    .three p{
        font-size: 20px;
    }
    .three .dongtai{
        color: #027CDB;
        padding-bottom: 15px;
        border-bottom: 2px solid #027CDB;
    }
    .three .shoucang{
        color: #027CDB;
        padding-bottom: 15px;
        border-bottom: 2px solid #027CDB;
    }
     .three .kecheng{
        color: #027CDB;
        padding-bottom: 15px;
        border-bottom: 2px solid #027CDB;
    }
    .four .dongtaicontent{
        width: 100%;
        height: 800px;
        background-color: #F6F8FA;
        box-sizing: border-box;
    }
 
    .four .dongtaicontent .empty{
        width: 20%;
        color: #87959F;
        font-size: 20px;
        text-align: center;
        margin:  0 auto;
        margin-top: 100px;
    }
    .four .dongtaicontent .nothing{
        width: 20%;
        color: #B1BBC3;
        font-size: 16px;
        text-align: center;
        margin:  0 auto;
        margin-top: 10px;
    }
    .four .kecheng{
        width: 100%;
        height: 800px;
        background-color: #F6F8FA;
        box-sizing: border-box;
    }
    .four .kecheng .neirong{
        width:14% ;
        margin-left: 20%;
        display: flex;
        justify-content: space-around;
        position: relative;
        top:20px
    }

    .four .kecheng .neirong .shequ{
        font-size: 20px;
        padding: 5px 10px;
        color: #9f9f9f;
    }
     .four .kecheng .neirong .shipin{
        font-size: 20px;
        padding: 5px 10px;
        color: #9f9f9f;
    }
    .four .kecheng .neirong .choose{
        font-size: 20px;
        padding: 5px 10px;
        border: 1px solid #EBD8B0;
        color: #EBD8B0;
        border-radius: 100px;
    }
     .four .kecheng img{
        display: block;
        margin: 0 auto;
        padding-top: 200px;
    }
    .four .kecheng .empty{
        width: 20%;
        color: #87959F;
        font-size: 20px;
        text-align: center;
        margin:  0 auto;
        margin-top: 100px;
    }
    .four .kecheng .nothing{
        width: 20%;
        color: #B1BBC3;
        font-size: 16px;
        text-align: center;
        margin:  0 auto;
        margin-top: 10px;
    }
    .ishide{
        display: none;
    }
    .four .tadejieshao{
        width: 70%;
        margin: 0 auto;
        margin-bottom: 30px;
    }
    .four .tadejieshao p{
        padding: 30px 0 20px;
        font-size: 20px;
        font-weight: 600;
    }
    .four .tadejieshao span{
        font-weight: 500;
        color: slategray;
        font-size: 18px;
    }
    .four .tadeline{
        width: 75%;
        height: .2px;
        background-color: #B1BBC3;
        margin: 0 auto;
        margin-bottom: 20px;
    }
    .four .tadezuopin{
        width: 70%;
        margin: 0 auto;
    }
    .four .tadezuopin p{
        font-size: 20px;
        font-weight: 600;
    }
    .four .tadezuopin .imgbox{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .four .tadezuopin img{
        width: 23%;
        height: 210px;
        border-radius: 15px;
        overflow: hidden;
        margin: 15px 0;
    }
</style>